<template>
    <div class="word-cloud-container">
        <wordcloud
            class="word-could"
            :margin="margin"
            :rotate="rotate"
            :font-size="[10, 50]"
            :data="defaultWords"
            nameKey="name"
            valueKey="count"
            :showTooltip="true"
            :wordClick="wordClickHandler">
        </wordcloud>
    </div>
</template>

<script>
import {getArticleLabels} from "assets/api/article-portal-api";
import {success_code} from "assets/utils/LRConstant";

export default {
    name: "LRWordCloud",
    data() {
        return {
            margin: {top: 0, right: 0, bottom: 0, left: 0},
            rotate: {from: -20, to: 20, numOfOrientation: 10},
            defaultWords: [],
        }
    },
    methods: {
        // 点击标签云的回调方法
        wordClickHandler(name) {
            // 两种方式都行
            location.href = "/search?keyword=" + encodeURIComponent(name);
        },
        getArticleLabels() {
            getArticleLabels(15).then((result) => {
                if (result.code === success_code) {
                    this.defaultWords = result.data.content;
                } else {
                    this.$message.error("获取文章标签失败");
                }
            })
        },
    },
    mounted() {
        this.getArticleLabels();
    }
}
</script>

<style scoped>
.word-could >>> text {
    cursor: pointer;
}

.word-could {
    height: 240px;
}
</style>